<template>
  <div class="content-wrap">
    <common-scroll class="scroll"
                   ref="scroll"
                   :data="content"
                   :listenScroll="listenScroll"
                   @scroll="handleScroll">
      <div class="scroll-content">
        <dl class="content-list"
            v-for="item of content"
            :key="item.id"
            ref="listGroup">
          <dt class="title">{{item.title}}</dt>
          <dd class="content-item"
              v-for="subItem of item.list"
              :key="subItem.id"
              @click="handleClassify(subItem.id)">
            <!-- <div class="title">{{subItem.cate_name}}</div> -->
            <div class="img-wrap"
                 w-245-245
                 aspectratio>
              <img :src="subItem.cate_image"
                   alt=""
                   aspectratio-content>
            </div>
            <p class="desc">{{subItem.cate_name}}</p>
          </dd>
        </dl>
        <dl class="content-list">
          <dt class="title"></dt>
          <dd class="content-item">
            <div class="img-wrap-fake">
            </div>
            <p class="desc"></p>
          </dd>
        </dl>
        <dl class="content-list">
          <dt class="title"></dt>
          <dd class="content-item">
            <div class="img-wrap-fake">
            </div>
            <p class="desc"></p>
          </dd>
        </dl>
        <dl class="content-list">
          <dt class="title"></dt>
          <dd class="content-item">
            <div class="img-wrap-fake">
            </div>
            <p class="desc"></p>
          </dd>
        </dl>
      </div>
    </common-scroll>
  </div>
</template>
<script>
import commonScroll from 'common/scroll/scroll'
export default {
  name: 'ClassifyContent',
  components: {
    commonScroll
  },
  props: {
    content: {
      type: Array,
      default () {
        return []
      }
    },
    navCurrentIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      scrollY: 0,
      currentIndex: 0
    }
  },
  methods: {
    handleClassify (id) {
      this.$localStorage.set('INDEX', JSON.stringify(false))
      this.$router.push({
        path: `/classify/all/${id}`
      })
    },
    handleScroll (pos) {
      this.scrollY = pos.y
    },
    _calculateHeight () {
      const list = this.$refs.listGroup
      this.listHeight = []
      let height = 0
      this.listHeight.push(height)
      for (let i = 0, len = list.length; i < len; i++) {
        const element = list[i]
        height += element.clientHeight
        this.listHeight.push(height)
      }
    }
  },
  created () {
    this.listenScroll = true
    this.listHeight = []
  },
  watch: {
    scrollY (newY) {
      const list = this.listHeight
      const topHeight = this.$refs.listGroup[0].offsetTop
      if (newY >= topHeight) {
        this.currentIndex = 0
        return
      }
      for (let i = 0, len = list.length - 1; i < len; i++) {
        let h1 = list[i]
        let h2 = list[i + 1]
        if (-newY > h1 && -newY < h2) {
          this.currentIndex = i
          return false
        }
      }
      this.currentIndex = list.length - 2
    },
    currentIndex (i) {
      this.$emit('changeIndex', i)
    },
    navCurrentIndex (i) {
      this.$refs.scroll.scrollToElement(this.$refs.listGroup[i], 1000)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this._calculateHeight()
    })
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.scroll
  width calc(100% - 200px)
  background-color $common_bgc
  left 200px
  top 98px
  bottom 110px

  .content-list
    padding()
    width 100%
    display flex
    justify-content space-between
    flex-wrap wrap
    margin-bottom 8px

    .title
      width 100%
      font-size $address
      font-weight 500
      color $footer_bgc
      line-height 68px

    .content-item
      width 245px
      margin-bottom 20px

      .img-wrap
        background-color $space
        border 2px solid $recommend_title
        box-sizing border-box
        border-radius 4px

      .img-wrap-fake
        background-color $common_bgc
        width 245px
        height 245px

      .desc
        font-size $address
        font-weight 400
        color $footer_bgc
        line-height 50px
        ellipsis()
        width 100%
        text-align center
</style>
